<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新增用户</title>
	<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
	<script src="js/vue.js"></script>
	<script src="element-ui/lib/index.js"></script>
	<script src="js/axios-0.18.0.js"></script>
	<script src="js/server.js"></script>
	<style>
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 78px;
			height: 78px;
			line-height: 78px;
			text-align: center;
		}
		.avatar {
			width: 78px;
			height: 78px;
			display: block;
		}
	</style>
</head>
<body>
<div id="div">
	<h4>新增用户</h4>
	<el-form :model="addForm" :rules="rules" ref="addForm" label-width="120px" class="demo-ruleForm">
		<el-form-item label="用户编码(账号)" prop="userCode">
			<el-input v-model="addForm.userCode"></el-input>
		</el-form-item>
		<el-form-item label="用户名称" prop="userName">
			<el-input v-model="addForm.userName"></el-input>
		</el-form-item>
		<el-form-item label="用户密码" prop="userPassword">
			<el-input v-model="addForm.userPassword" type="password"></el-input>
		</el-form-item>
		<el-form-item label="性别" prop="gender">
			<el-radio v-model="addForm.gender" label="1">男</el-radio>
			<el-radio v-model="addForm.gender" label="2">女</el-radio>
		</el-form-item>
		<el-form-item label="出生日期" prop="birthday">
			<el-date-picker
					v-model="addForm.birthday"
					type="date"
					placeholder="选择日期"
					value-format="yyyy-MM-dd">
			</el-date-picker>
		</el-form-item>
		<el-form-item label="手机" prop="phone">
			<el-input v-model="addForm.phone"></el-input>
		</el-form-item>
		<el-form-item label="地址" prop="address">
			<el-input v-model="addForm.address"></el-input>
		</el-form-item>
		<el-form-item label="用户角色" prop="userRole">
			<el-select v-model="addForm.userRole" placeholder="请选择">
				<el-option
						v-for="item in userRoleList"
						:key="item.id"
						:label="item.roleName"
						:value="item.id">
				</el-option>
			</el-select>
		</el-form-item>

		<el-form-item>
			<el-button type="primary" @click="submitForm('addForm')">保存</el-button>
			<el-button @click="resetForm('addForm')">清空</el-button>
		</el-form-item>
	</el-form>
</div>
</body>
<script type="application/javascript">
	new Vue({
		el: '#div',
		data: {
			addForm: {
				gender: '1',
				birthday: ''
			},
			userRoleList: [],
			rules: {
				userCode: [{
					required: true,
					message: '请输入用户编码',
					trigger: 'blur'
				}],
				userName: [{
					required: true,
					message: '请输入用户名称',
					trigger: 'blur'
				}],
				userPassword: [{
					required: true,
					message: '请输入密码',
					trigger: 'blur'
				}, {
					min: 6,
					message: '密码长度不能少于6位',
					trigger: 'blur'
				}],
				phone: [{
					pattern: /^1[3-9]\d{9}$/,
					message: '请输入正确的手机号',
					trigger: 'blur'
				}]
			}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// 1. 构造JSON格式参数（与后端User实体属性对应）
						const userData = {
							userCode: this.addForm.userCode.trim(),
							userName: this.addForm.userName.trim(),
							userPassword: this.addForm.userPassword,
							gender: parseInt(this.addForm.gender), // 转为数字类型
							birthday: this.addForm.birthday,
							phone: this.addForm.phone.trim(),
							address: this.addForm.address.trim(),
							userRole: this.addForm.userRole ? parseInt(this.addForm.userRole) : null
						};

						// 2. 发送POST请求（指定JSON格式）
						axios({
							method: 'post',
							url: server_url + "/api/user",
							data: userData, // 传递JSON对象
							headers: {
								'Content-Type': 'application/json' // 明确指定请求格式
							}
						}).then(resp => {
							if (resp.data.code === 0) {
								this.$message({
									message: resp.data.msg || '新增用户成功',
									type: 'success'
								});
								this.resetForm(formName); // 清空表单
							} else {
								this.$message.error(resp.data.msg || '新增用户失败');
							}
						}).catch(err => {
							console.error('新增用户错误:', err.response || err);
							this.$message.error('请求失败：' + (err.response?.data?.msg || '服务器异常'));
						});
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			queryAllRoles() {
				axios.get(server_url + "/api/role")
						.then(resp => {
							if (resp.data.code === 0) {
								this.userRoleList = resp.data.data || [];
							} else {
								this.$message.error('获取角色列表失败：' + resp.data.msg);
							}
						}).catch(err => {
					console.error('获取角色错误:', err);
					this.$message.error('获取角色列表失败，请重试');
				});
			}
		},
		mounted() {
			this.queryAllRoles(); // 页面加载时获取角色列表
		}
	});
</script>
</html>